const path = require('path');
const webpack = require('webpack');
const fs = require('fs');
/*不要为了非常小的性能增益，牺牲你应用程序的质量！ 请注意，优化代码质量在大多数情况下比构建性能更重要。*/

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CompressionPlugin = require("compression-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
/**
 * 资源表
*/
var AssetsPlugin = require('assets-webpack-plugin');
var assetsPluginInstance = new AssetsPlugin({filename:'assets.json'});


var os = require('os');
var UglifyJsParallelPlugin = require('webpack-uglify-parallel');

//环境配置
var pkg = require('./package.json');
let currentEnv=process.env;
var env = currentEnv.NODE_ENV && pkg.config && pkg.config.env || 'prod';
const context=path.resolve(__dirname, './assets/src');
const imgContext=path.resolve(__dirname, './assets/dist'); 

function getPages(pageBase) {
  let pages = [];
  let directories = fs.readdirSync(pageBase);
  for (let dir of directories) {
    if (!dir.startsWith('.')) {
      pages.push(dir);
    }
  }
  return pages;
}

function getEntries(pageBase) {
  let pages = getPages(pageBase);
  let entries = {};
  for (let page of pages) {
    let key = `${page}`;
    let extensions = ['js', 'scss', 'css'];
    let value = '';
    for (let i = 0; i < extensions.length; i++) {
      let temp = path.resolve(pageBase, `${page}/index.${extensions[i]}`);
      if (fs.existsSync(temp)) {
        value = temp;
        break;
      }
    }
    if (value) {
      entries[key] = value;
    }
  }
  entries.common = path.resolve(__dirname, './assets/src/common/index.js');
  //entries.common=[path.resolve(__dirname, './assets/src/common/index.js')];
  return entries;
}

let outputConfig = {//输出  cdn资源[hash]值
  path: path.join(__dirname,'assets','dist'),
  filename: '[name]/bundle-[chunkhash:8].js?',
  publicPath: '/dist/'
};

var webpackConfig = {
  context,
  entry: getEntries(path.join(context, 'pages')),
  output: outputConfig,
  plugins: [//插件
    new CleanWebpackPlugin(['dist'], {
      root: path.resolve(__dirname+'/assets')
    }),
    new ExtractTextPlugin({//bundle 中提取 CSS，以便之后可以并行加载 CSS/JS 资源
      filename: '[name]/bundle-[chunkhash:8].css'
    }),
    new webpack.DefinePlugin({ // 指定环境 production
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    // new webpack.optimize.CommonsChunkPlugin({  // 构建优化插件
    //   names: ["common"],
    //   minChunks: Infinity
    // }),
    new UglifyJsPlugin({/*webpack 对js压缩插件*/
      test: /\.js($|\?)/i,
      cache:true,
      sourceMap: false,
      parallel: false,//并行执行
      uglifyOptions:{
        warnings: false,//警告
        output:{
          beautify: false,//美化
          comments: false//去掉注释
        },
        compress:true//额外的压缩选项
      }
    }),
    // new UglifyJsParallelPlugin({
    //   workers: os.cpus().length, // usually having as many workers as cpu cores gives good results
    //   // other uglify options
    //   compress:true,//额外的压缩选项
    //   parallel: false,//并行执行
    // }),
    new CompressionPlugin({
      test: [/\.js/,/\.css/],
      algorithm: 'gzip',
      deleteOriginalAssets:false
    }),
    assetsPluginInstance
    // new CopyWebpackPlugin([
    //     { from: 'assets/dist/index/bundle.css', to: 'assets/dist/index1/bundle.css' },
    // ])
    //new HtmlWebpackPlugin()
  ],
  resolve: {//解析
    modules: [path.join(__dirname, 'assets'),"node_modules"],//webpackage解析模块时的目录
    extensions: ['.js'],//自动解析确定的扩展
    alias: {//别名,一个请求重定向到另一个路径
      'react': 'preact-compat',
      'react-dom': 'preact-compat'
    }
  },
  module: {//模块
    rules: [//加载器loader是对应用程序中资源文件进行转换
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        }
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [{
              loader:'css-loader',
              options:{
                minimize:true
              }
            }
          ]
        })
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",// 将 JS 字符串生成为 style 节点
          use: [{
            loader: "css-loader",// 将 CSS 转化成 CommonJS 模块
            options:{
              minimize:true
            }
          }, {
            loader: "fast-sass-loader"// 将 Sass 编译成 CSS
          }]
        })
      },
      {/*图片处理 url-loader根据大小可实现base64编码*/
        test: /\.(png|svg|jpg|gif)$/,
        loader: 'file-loader',
        options: {
          publicPath:'/dist/',
          name: '[path][name].[ext]'//[hash]
        }
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          'file-loader'
        ]
      },
      {
        test: /\.html$/,
        use: [{
          loader: 'html-loader',
          options: {
            minimize: true,
            removeComments: false,
            collapseWhitespace: false
          }
        }],
      }
    ]
  }
};

if (env === 'fat') {
  webpackConfig.devtool = 'eval-source-map';
}

module.exports = webpackConfig;

/***
 * 加载器：loader
 * loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，
 * 并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。
 * loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！
 * 
 * 插件：Plugins
 * 插件是 wepback 的支柱功能。webpack 自身也是构建于，你在 webpack 配置中用到的相同的插件系统之上！插件目的在于解决 loader 无法实现的其他事。
 * 
 * 模块(Modules)
 * 在模块化编程中，开发者将程序分解成离散功能块(discrete chunks of functionality)，并称之为模块。
 * ES2015 import 语句
 * CommonJS require() 语句
 * AMD define 和 require 语句
 * css/sass/less 文件中的 @import 语句。
 * 样式(url(...))或 HTML 文件(<img src=...>)中的图片链接(image url)
 * 
 * 模块解析(Module Resolution)
 * resolver 是一个库(library)，用于帮助找到模块的绝对路径。一个模块可以作为另一个模块的依赖模块，然后被后者引用，如下：
 * 所依赖的模块可以是来自应用程序代码或第三方的库(library)。resolver 帮助 webpack 找到 bundle 中需要引入的模块代码，这些代码在包含在每个 require/import 语句中。
 * 当打包模块时，webpack 使用 enhanced-resolve 来解析文件路径。
 * 使用 enhanced-resolve，webpack 能够解析三种文件路径：绝对路径  相对路径  模块路径
 * 
 * 常用loaders
 * css-loader extract-loader file-loader gzip-loader html-loader sass-loader style-loader url-loader 
 * 常用Plugins
 * ExtractTextWebpackPlugin 它会将所有的入口 chunk(entry chunks)中引用的 *.css，移动到独立分离的 CSS 文件。
 * CompressionWebpackPlugin 提供带 Content-Encoding 编码的压缩版的资源 gzip
 * CleanWebpackPlugin 在每次构建前清理 /dist 文件夹,避免我们的 /dist 文件夹相当杂乱
 * HtmlWebpackPlugin 简化了HTML文件的创建，以便为你的webpack包提供服务。用于服务器访.
 * CopyWebpackPlugin 将单个文件或整个目录复制到构建目录
 * IgnorePlugin 在打包时忽略本地化内容
 * ProvidePlugin 自动加载模块，而不必到处 import 或 require 。 jQuery lodash vue
 * 
 * 
 * 
*/